<template>
  <div ref="signArea" class="sign">
    <img src="~img/lantern.png" alt="灯笼">
    <h2>选择下面4个挑战项目中的一个,即算挑战成功</h2>
    <ul>
      <li v-for="item in signItem" :key="item.type">
        <input type="radio" :id="item.type" name="item" :value="item.value" v-model="picked">
        <label :for="item.type">{{ item.text }}</label>
      </li>
    </ul>
    <div class="liability">
      <input type="checkbox" name="liability" id="liability" v-model="agree">
      <label for="liability"></label>
      <span class="read" @click="handleReadClick"> 免责声明</span>
    </div>
    <div class="btn" @click="handleSignUp">确认报名</div>
    <free-lib v-show="isShowLib" @libClose="libClose"></free-lib>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
import { activityId, signUpUrl } from 'common/base.js'
import FreeLib from './components/FreeLib'
export default {
  name: 'Sign',
  data () {
    return {
      isShowLib: false,
      picked: 20,
      agree: false,
      signItem: [{
        type: 'item20',
        value: 20,
        text: ' 初出茅庐-月累计20KM'
      }, {
        type: 'item50',
        value: 50,
        text: ' 小试牛刀-月累计50KM'
      }, {
        type: 'item70',
        value: 75,
        text: ' 棋逢对手-月累计75KM'
      }, {
        type: 'item100',
        value: 100,
        text: ' 大展身手-月累计100KM'
      }]
    }
  },
  computed: {
    ...mapState({
      mid: 'mid'
    })
  },
  components: {
    FreeLib
  },
  methods: {
    setAreaHeight () {
      let oBody = document.documentElement || document.body
      this.$refs.signArea.style.height = oBody.clientHeight + 'px'
    },
    handleReadClick () {
      this.isShowLib = true
    },
    libClose () {
      this.isShowLib = false
    },
    handleSuccess (res) {
      res = res.data
      console.log(res)
      if (res.code === 0) {
        alert('报名成功')
        this.$router.replace('/')
      }
    },
    handleSignUp () {
      console.log(activityId)
      if (this.agree) {
        axios.get(signUpUrl, {
          params: {
            activityId: activityId,
            mid: this.mid,
            countCompleteValue: this.picked * 1000
          }
        }).then(this.handleSuccess)
      } else {
        alert('请勾选免责声明')
      }
    }
  },
  mounted () {
    this.setAreaHeight()
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .sign
    height 100%
    background-color #f2f2f2
    img
      width .5rem
      margin-left .65rem
    h2
      margin-top .57rem
      text-align center
      font-weight 600
    li
      margin-left 1.8rem
      margin-top 1rem
      input[type="radio"]
        width .4rem
        position absolute
        clip rect(0, 0, 0, 0)
      input[type="radio"]+label::before
        display inline-block
        content ''
        vertical-align middle
        width .28rem
        height .28rem
        margin-right .1rem
        border 1px solid $bgColor
        border-radius(50%)
        box-sizing border-box
      input[type="radio"]:checked + label::before
        background-color: $bgColor
        background-clip: content-box
        padding .05rem
    .liability
      text-align center
      margin .8rem 0 .4rem
      input[type="checkbox"]
        position absolute
        clip rect(0, 0, 0, 0)
      input[type="checkbox"] + label::before
        display inline-block
        content '\2713'
        color #fff
        width .4rem
        height .4rem
        line-height .4rem
        margin-right .1rem
        background-color $grey
      input[type="checkbox"]:checked + label::before
        background-color #0cb60e
      .read
        font-size .3rem
        color $grey
    .btn
      width $width
      height $height
      line-height $height
      text-align center
      margin auto
      color #fff
      background-color $bgColor
      font-size $bigSize
      border-radius(.44rem)
</style>
